<template>
  <view style="background-color: bisque;height: auto;">
    <view class="main">
      <LuckyWheel
        ref="myLucky"
        class="lucky"
        :blocks="blocks"
        :prizes="prizes"
        :buttons="buttons"
        :defaultStyle="defaultStyle"
        @start="startCallBack"
        @end="endCallBack"
      />
    </view>

    <view style="margin: auto;width: 100vw;height: 100px;">
      <view style="margin: auto; font-size: 1.5em;font-weight: 500;text-align: center;">我的礼品</view>
      <view class="gift">
        <view v-for="it of mygift" >
          <view class="gift-box"> {{it.shopgift.title}}</view>
        </view>
      </view>
    </view>

  </view>
  </template>
  
  <script>
    import LuckyWheel from '@lucky-canvas/uni/lucky-wheel'
    export default {
      components: { LuckyWheel },
      data () {
        return {
          blocks: [{ padding: '13px', background: '#ea4452' }],
          prizes: [
            { fonts: [{ text: '一等奖', top: '10%' }], background: '#ffd7ab' },
            { fonts: [{ text: '二等奖', top: '10%' }], background: '#f9fced' },
            { fonts: [{ text: '三等奖', top: '10%' }], background: '#ffd7ab' },
            { fonts: [{ text: '四等奖', top: '10%' }], background: '#f9fced' },
            { fonts: [{ text: '五等奖', top: '10%' }], background: '#ffd7ab' },
            { fonts: [{ text: '六等奖', top: '10%' }], background: '#f9fced' },
            { fonts: [{ text: '七等奖', top: '10%' }], background: '#ffd7ab' },
            { fonts: [{ text: '八等奖', top: '10%' }], background: '#f9fced' },
            { fonts: [{ text: '九等奖', top: '10%' }], background: '#ffd7ab' },
            { fonts: [{ text: '十等奖', top: '10%' }], background: '#f9fced' },
          ],
          buttons: [
            { radius: '50px', background: '#ea4452' },
            { radius: '45px', background: '#ffd7ab' },
            {
              radius: '40px', background: '#ea4452',
              pointer: true,
              fonts: [{ text: '开始\n抽奖', top: '-20px' }]
            },
          ],
          store_id:'',
          gift:[],
          mychance:'',
          mygift:[]
        }
      },
      onLoad()
      {
        this.store_id = uni.getStorageSync('store_id');
        this.getprize()
      },
      onShow()
      {
        //判断商铺是否有抽奖功能  
        
        console.log(this.store_id);
      },
      methods: {
        // 点击抽奖按钮触发回调
        startCallBack () {
          if(!this.mychance)
          {
            uni.showToast({
              title:'暂无抽奖资格',
              icon:'error'
            })
            return false;
          }
          this.postprize()
          // 先开始旋转
          this.$refs.myLucky.play()
          // 使用定时器来模拟请求接口
          setTimeout(() => {
            // 假设后端返回的中奖索引是0
            const index = this.gift.c-1
            // 调用stop停止旋转并传递中奖索引
            this.$refs.myLucky.stop(index)
          }, 3000)
          
        },
        // 抽奖结束触发回调
        endCallBack (prize) {
          // 奖品详情
          uni.showModal({
            title:'恭喜中奖',
            content:this.gift.a,
            success()
            {
              uni.redirectTo({
                url:'/pages/prize/index'
              })
            }
          })
        },

        // 请求奖品数据
        getprize()
        {
          let that = this
          this.$ajaxRequest.get(this.baseUrl + 'shop/member/shopgift', {
            store_id:this.store_id,uid:uni.getStorageSync('UserInfo').id
          }, true).then(res => {
            // console.log(res.data);
            if(res.data.code == 100)
            {
              uni.showModal({
                title:'活动提示',
                content:res.data.msg,
                success(){
                  uni.navigateBack({
                    delta:1
                  })
                }
              })
            }else{
              that.mychance = res.data.data.prize
              that.mygift = res.data.data.mygift
              console.log(res.data.data.mygift,'houtai');
            }
          })
        },

        postprize()
        {
          let that = this
          this.$ajaxRequest.get(this.baseUrl + 'shop/member/shopprize', {
            store_id:this.store_id,uid:uni.getStorageSync('UserInfo').id
          }, false).then(res=>{
            if(res.data.code == 100)
            {
              uni.showModal({
                title:'活动提示',
                content:res.data.msg
              })
            }else{
              that.gift = res.data.data
              console.log(res.data.data.c);
            }
            
          })
        }
      }
    }
  </script>

  <style>
    .main{
      height: 1024px;
      background-image: url("https://csyx.codedemon.cn/upload/thumb/p.jpg");
      background-size: 100%;
      background-repeat: no-repeat;
    }

    .lucky{
      width:640rpx;
      height:640rpx;
      position: absolute;
      top: 280px;
      left: 20px;
        
    }

    .gift{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100vw;
      text-align: center;
      justify-content: space-evenly;
      background-color: bisque;
    }

    .gift-box{
      width: 32vw;
      line-height: 30px;
      background-color: white;
      margin: 5px auto;
      font-size: 1.2em;
      font-weight: 600;
    }
  </style>